<template>
  <list-page>
    <pub-search noColumns>
      <template #leftBtn>
        <el-button type="primary" @click="add('','顶级','root')" :icon="Plus">
          新增
        </el-button>
      </template>
    </pub-search>
    <el-table
      ref="treeTableRef"
      :header-cell-style="{
        background: 'rgb(244, 249, 255)',
        color: '#087CD6',
        fontSize: '14px'
      }"
      :data="treeData"
      style="width: 100%; height: 100%"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="机构类型" />
      <el-table-column prop="prefix" label="机构编码前缀" />
      <el-table-column prop="status" label="是否启用">
        <template #default="scope">
          <el-switch
            @change="setAreaStatus(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button plain type="primary" @click="add(scope.row.id,scope.row.name,'')">
            添加
          </el-button>
          <el-button plain type="primary" @click="edit(scope.row.id)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pub-dialog
      v-if="editDialogVisible"
      :title="dialogTitle"
      :hasExtraBtn="true"
      v-model:visible="editDialogVisible"
      width="800"
    >
      <editDialog
        :dialog-id="dialogId"
        :dialog-type="dialogType"
        :p-name="pName"
        @cancel="editDialogVisible = false"
        @success="editSuccess"
      ></editDialog>
    </pub-dialog>
  </list-page>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import { get_org_type_tree, change_org_type_status } from '@/api/system'
import editDialog from './edit.vue'
const treeData = ref([])
const getPageData = async () => {
  let { data } = await get_org_type_tree('')
  treeData.value = data
}

const showAdd = (level, hasChildren) => {
  if (level == 0 || level == 5) {
    return false
  }
  return true
}
//
const treeTableRef = ref(null)
const editDialogVisible = ref(false)
const dialogId = ref('')
const dialogTitle = ref('')
const dialogType = ref('')
const pName = ref('')
const add = (pid,name,type) => {
  dialogId.value  = type==='root'?'':pid
  pName.value = name
  dialogTitle.value = '新增'
  dialogType.value = 'add'
  editDialogVisible.value = true
}
const edit = id => {
  dialogId.value = id
  dialogTitle.value = '编辑'
  dialogType.value = 'edit'
  editDialogVisible.value = true
}
const editSuccess = id => {
  editDialogVisible.value = false
  getPageData()
}
//
const setAreaStatus = async val => {
  try {
    await change_org_type_status({ id: val.id, status: val.status })
  } catch (error) {
    val = !val
    console.log(error)
  }
}
onMounted(() => {
  getPageData()
})
</script>
<style lang="scss" scoped>
.el-table {
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    color: #087cd6 !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
}
</style>
